<template>
    <div class="Father">
        <h1>父组件</h1>
        <p>money:{{ money }} carBrand:{{ car.brand }} carPrice:{{ car.price }}</p>
        <Child/>
        <!-- <p>子的money:{{ moneyChild }}</p> -->
        <p>子的money:{{ moneyChild}}</p>
    </div>
    </template>
    
    <script lang="ts">
    export default {
    name:'Father'
    }
    </script>
    
    <script setup lang="ts">
import { inject, provide, reactive, ref, toRef } from 'vue';
    import Child from './Child.vue';
    let money = ref(100)
    let car = reactive({ brand: '奔驰', price: 100 })

    provide('money', money)

    // let moneyChild = inject('monyChild', '接受不到子的数据,默认值')
    //接受不到，提供给父亲钱的方法
    provide('getMoneyChild', getMoneyChild)
    //子的钱
    let isBool = false
    let moneyChild = ref(null)
    provide('moneyChild', moneyChild)
    //子挂载时同步子的钱数据
    provide('syncMoneyChild', syncMoneyChild)
    function syncMoneyChild(val:any) { 
        console.log('同步调用');
        moneyChild.value = val.value
        moneyChild = toRef(val)
    }

    //给父亲钱的方法
    function getMoneyChild(value:any) { 
        //给父亲钱
        money.value += value.monyChild.value
        //子的钱清空
        value.monyChild.value = 0
    }
    </script>
    
    <style lang="css">
    .Father{
        margin: 20px;
        height: 600px;
        width: 500px;
        background-color:aqua;
    }
    </style>